<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>first</title>
		<meta name="generator" content="Studio 3 http://aptana.com/">
		<meta name="author" content="Awais">
		<!-- Date: 2011-08-03 -->
	</head>
	<script src="jquery-1.6.2.min.js"></script>
	<script src="jquery-ui-1.8.14.custom.min.js"></script>
	<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.14.custom.css"/>
	<style>
	.column { width: 170px; float: left; padding-bottom: 100px; padding-left:0.2em; padding-right: 0.2em; background-color: #C9C9C9;border: dotted #000000 1px;}
	.portlet { margin: 0 1em 1em 0; float:left; width:140px;}
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
	
	.ui-state-highlight {height: 1.5em; line-height: 1.2em;  }
	
	
	</style>
	<script>
	
	$(function() {
		$( ".column" ).sortable({
			connectWith: ".column",
			placeholder: "ui-state-highlight"
		});

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
			.find( ".portlet-content" );

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
			$(this).parents("portlet").animate({opatcity:.5, height:'50%'});
		});
		var i=1;
		
		
		$( ".column" ).disableSelection();
		
		$("#bt_addCol").click(function(){
			$('#myGrid').append("<div class='column' id='column"+i+"'></div>");
			
			$('.column').resizable();
			
			$('.column').sortable('destroy');
			
			
			
			$( ".column" ).sortable({
				connectWith: ".column",
				placeholder: "ui-state-highlight"
			});
			
			$(".column").draggable();

			i++;
			
		});
		
		$(".portlet").resizable({
			
			//alsoResize:".column",
			
			stop:function(event,ui){
							//$(event.target).parent(".column").css('width','300px');
							//alert($(this).parent(".column"));
							// alert("Stop");
						
							var x=event.target;
							var p=$(x).parent();
								var maxwidth=ui.size.width;
								for (var i=0; i < $(x).siblings('.portlet').length; i++) {
								  var jportlet=$(x).siblings('.portlet')[i];
								  if(maxwidth<$(jportlet).outerWidth()){
									  maxwidth=$(jportlet).outerWidth();
								  }
								  else{
									 if(($(p).outerWidth()-$(jportlet).outerWidth())>170){
									 	}
									}
								};
								//setting parent .column width.
								$(p).animate({width:maxwidth,},1000); //time of animation 0.2sec		
							
						},
			
			
	});
		
		
		
		$('.column').hover(
	/*
			function(){
				
					$(this).css('background-color','#000000');
				},
				function(){
					$(this).css('background-color','#FFFFFF')
				}*/
	
		
		);
		
	
	});
	

	
	</script>
	
	<body>
		<button id="bt_addCol">
			Add Column
		</button>
		<div id="myGrid">
			<div class="column">
				<div class="portlet">
					<div class="portlet-header">
						Shopping
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
				<div class="portlet">
					<div class="portlet-header">
						Playing around
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
				<div class="portlet">
					<div class="portlet-header">
						Cat :D
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
				<div class="portlet">
					<div class="portlet-header">
						4th :O
					</div>
					<div class="portlet-content">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit
					</div>
				</div>
				
			</div>
		</div>
	</body>
	</html>
